<!-- <template>
  <div style="background-color:#f7f7f7;width:390px;height:844px;">
     <div style="background-color:white;height:230px;">
          <div style="display:flex;width:360px;margin-left:15px;margin-top:20px;margin-bottom:15px;">
              <p><el-icon @click="onClickLeft"><ArrowLeft  size="25"/></el-icon></p>
              <p style="margin-left:135px">预约看房</p>
          </div>
          <div style="width:360px;margin-left:15px;display:flex;margin-bottom:5px;">
              <div>
                  <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u591.svg">
              </div>
              <div style="margin-left:15px;">
                  <p style="font-size: 13px;font-weight:700;margin-top:-2px">整租 | 实图真价 福田金地大百汇...</p>
                  <p style="font-size: 12px;color:gray;">2室 78m*彩天名苑 岗夏</p>
                  <p style="margin-top:-5px;">
                      <span style="color:gray;font-size: 14px;">7000元/月</span>
                      
                  </p>
              </div>
          </div>
          <div style="width:360px;height:60px;margin-left:15px;display:flex;background-color:#fafafa;border-radius:13px;">
          <div style="margin-top:10px;margin-left:15px"><img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u594.svg"></div>
          <div>
              <p style="font-size:13px;font-weight:400;margin-left:15px;">李小红女士
                  <br><span style="font-size:11px;color:gray;">个人房东</span>
              </p>
              
          </div>
          <div>
              <p style="font-size:11px;color:gray;margin-top:30px;margin-left:125px;">信用良好 70分</p>
          </div>
      </div>
      
     </div>
     <div style="background-color:white;width:390px;height:600px;margin-top:10px;">
        
        <div style="width:360px;height:120px;margin-left:15px;padding-top:20px;">
          <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="name"
      name="预约人"
      label="预约人"
      placeholder="请填写称呼"
      :rules="[{ required: true, message: '请填写预约人' }]"
    />
    <van-field
      v-model="phone"
      name="联系手机"
      label="联系手机"
      placeholder="请填写手机号码"
      :rules="[{ required: true, message: '请填写手机号码' }]"
    />
    <van-field
      v-model="time"
      name="看房时间"
      label="看房时间"
      placeholder="请选择期望时间"
      :rules="[{ required: true, message: '请填写期望时间' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" style="background-color:#f57c00;border:1px solid #f57c00">
      立即预约
    </van-button>
  </div>
</van-form>

        </div>
       
      </div>
  </div>
</template>

<script setup lang="ts">
import {ref,computed, onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
const onClickLeft = () => history.back()
const name = ref('');
const phone = ref('');
const time = ref('')
const onSubmit = () => {
      axios.post('add',{name:name.value,phone:phone.value,time:time.value}).then(
        res=>{
          if(res.data.code==200){
            alert(res.data.msg)
            name.value=''
            phone.value=''
            time.value=''
          }
        }
      )
    };
</script>

<style>

</style> -->
<template>
  <div style="background-color:#f7f7f7;width:390px;height:844px;">
     <div style="background-color:white;height:230px;">
          <div style="display:flex;width:360px;margin-left:15px;margin-top:20px;margin-bottom:15px;">
              <p><el-icon @click="onClickLeft"><ArrowLeft  size="25"/></el-icon></p>
              <p style="margin-left:135px">预约看房</p>
          </div>
          <div style="width:360px;margin-left:15px;display:flex;margin-bottom:5px;">
              <div>
                  <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u591.svg" @click="router.push('/xiang')">
              </div>
              <div style="margin-left:15px;">
                  <p style="font-size: 13px;font-weight:700;margin-top:-2px">整租 | 实图真价 福田金地大百汇...</p>
                  <p style="font-size: 12px;color:gray;">2室 78m*彩天名苑 岗夏</p>
                  <p style="margin-top:-5px;">
                      <span style="color:gray;font-size: 14px;">7000元/月</span>
                      
                  </p>
              </div>
          </div>
          <div style="width:360px;height:60px;margin-left:15px;display:flex;background-color:#fafafa;border-radius:13px;">
          <div style="margin-top:10px;margin-left:15px"><img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%9C%AA%E9%A2%84%E7%BA%A6%E7%9C%8B%E6%88%BF/u594.svg"></div>
          <div>
              <p style="font-size:13px;font-weight:400;margin-left:15px;">李小红女士
                  <br><span style="font-size:11px;color:gray;">个人房东</span>
              </p>
              
          </div>
          <div>
              <p style="font-size:11px;color:gray;margin-top:30px;margin-left:125px;">信用良好 70分</p>
          </div>
      </div>
      
     </div>
     <div style="background-color:white;width:390px;height:600px;margin-top:10px;">
        
        <div style="width:360px;height:120px;margin-left:15px;padding-top:20px;">
          <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="name"
      name="预约人"
      label="预约人"
      placeholder="请填写称呼"
      :rules="[{ required: true, message: '请填写预约人' }]"
    />
    <van-field
      v-model="phone"
      name="联系手机"
      label="联系手机"
      placeholder="请填写手机号码"
      :rules="[{ required: true, message: '请填写手机号码' }]"
    />
    <van-field
      v-model="time"
      name="看房时间"
      label="看房时间"
      placeholder="请选择期望时间"
      :rules="[{ required: true, message: '请填写期望时间' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" style="background-color:#f57c00;border:1px solid #f57c00">
      立即预约
    </van-button>
  </div>
</van-form>

        </div>
       
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from '../../axios';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();
const onClickLeft = () => history.back();

const name = ref('');
const phone = ref('');
const time = ref('');

const onSubmit = async () => {
  try {
    const response = await axios.post('/add', {
      appointer: name.value,
      phone: phone.value,
      visitTime: time.value
    });
    console.log(response.data);
    // 可以在这里添加提示信息，如弹出成功提示框
    alert('预约成功');
    // 清空表单
    name.value = '';
    phone.value = '';
    time.value = '';
    router.push('/xiang')
  } catch (error) {
    console.error('预约失败:', error);
    alert('预约失败，请稍后重试');
  }
};
</script>

<style>

</style>